import React, { useEffect } from 'react';
import { Form, Row, Col, InputNumber, Button } from 'dw-mx';
import { NumberMask } from 'dw-mx-extend';

export default function StringInputDemo() {

    const [form] = Form.useForm();

    useEffect(() => {
        // 可以从外部填值
        form.setFieldsValue({
            'xb': '1'
        });
    }, []);

    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }
    };

    const onChange = (value) => {
        // 可以监听 onchange
        console.log(value);
    };

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };

    return (
        <>
            <Form form={form}
                  {...layout}
                  layout={'horizontal'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="####" name="n1" rules={[{ required: true }]}>
                            <InputNumber onChange={onChange} placeholder={'####'} {...NumberMask("###")}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="####.00" name="n2" rules={[{ required: true }]}>
                            <InputNumber onChange={onChange} placeholder={'####.00'} {...NumberMask("####.00")}/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <Button onClick={onClick}>取值</Button>
        </>
    );
}